import * as echarts from 'echarts';
import { isNil } from "lodash-es";
import React from "react";
import { IProvinceGDP } from "../../core/interface";

export interface IProps {
    year: number;
    yearlyData: IProvinceGDP[];
}

/** 堆叠柱状图 */
const StackBarChart: React.FC<IProps> = (props) => {
    const { year, yearlyData } = props;
    const containerRef = React.useRef<HTMLDivElement>(null);
    const chartRef = React.useRef<echarts.ECharts>(null);

    const renderChart = () => {
        if (isNil(containerRef.current) || isNil(yearlyData)) return;
        const { width, height } = containerRef.current.getBoundingClientRect();
        const chartWidth = width;
        const chartHeight = height;
        const option = {
            title: {
                text: `${year}年各省份GDP占比`
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['GDP', '第一产业', "第二产业", "第三产业"],
                bottom: '5%',
                left: 'center',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: (yearlyData ?? []).map(item => item.province),
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'GDP',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: yearlyData.map(item => item.gdp),
                },
                {
                    name: '第一产业',
                    type: 'bar',
                    stack: '产业分布',
                    emphasis: {
                        focus: 'series'
                    },
                    data: yearlyData.map(item => item.gdp1),
                },
                {
                    name: '第二产业',
                    type: 'bar',
                    stack: '产业分布',
                    emphasis: {
                        focus: 'series'
                    },
                    data: yearlyData.map(item => item.gdp2),
                },
                {
                    name: '第三产业',
                    type: 'bar',
                    stack: '产业分布',
                    emphasis: {
                        focus: 'series'
                    },
                    data: yearlyData.map(item => item.gdp3),
                },
                // {
                //     name: 'Search Engine',
                //     type: 'bar',
                //     data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                //     emphasis: {
                //         focus: 'series'
                //     },
                //     markLine: {
                //         lineStyle: {
                //             type: 'dashed'
                //         },
                //         data: [[{ type: 'min' }, { type: 'max' }]]
                //     }
                // },
                // {
                //     name: 'Baidu',
                //     type: 'bar',
                //     barWidth: 5,
                //     stack: 'Search Engine',
                //     emphasis: {
                //         focus: 'series'
                //     },
                //     data: [620, 732, 701, 734, 1090, 1130, 1120]
                // },
                // {
                //     name: 'Google',
                //     type: 'bar',
                //     stack: 'Search Engine',
                //     emphasis: {
                //         focus: 'series'
                //     },
                //     data: [120, 132, 101, 134, 290, 230, 220]
                // },
                // {
                //     name: 'Bing',
                //     type: 'bar',
                //     stack: 'Search Engine',
                //     emphasis: {
                //         focus: 'series'
                //     },
                //     data: [60, 72, 71, 74, 190, 130, 110]
                // },
                // {
                //     name: 'Others',
                //     type: 'bar',
                //     stack: 'Search Engine',
                //     emphasis: {
                //         focus: 'series'
                //     },
                //     data: [62, 82, 91, 84, 109, 110, 120]
                // }
            ]
        };
        if (chartRef.current) {
            // update
            chartRef.current.setOption(option);
        } else {
            const chart = echarts.init(containerRef.current, undefined, {
                height: chartHeight,
                width: chartWidth,
            });

            chart.setOption(option);
            chartRef.current = chart;
        }


    };

    React.useEffect(() => {
        renderChart();
    }, [yearlyData]);

    return (
        <div className="pie-chart-contaienr" ref={containerRef} style={{
            width: '100%',
            height: '400px',
            // display: 'inline-block',
            verticalAlign: 'top',
            borderBottom: '1px solid #C4C6CF',
        }}>

        </div>
    );
};

export default StackBarChart;